<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="http://sqimg.qq.com/qq_product_operations/mma/javanli_test/lib/three.min.js"></script>
 
    <title>Three.js入门</title>
</head>
<body>

    <canvas id="canvas" width="500" height="500"></canvas>

    <!-- <script src="./js/three.js"></script> -->
    <!-- <script src="./js/three.min.js"></script> -->

    <script>

        var renderer, camera, scene, light, object;
        var width, height;

        // 首先初始化 Renderer 
        function initRenderer() {

            var canvas = document.getElementById('canvas')

            width = canvas.clientWidth;

            height = canvas.clientHeight;

            renderer = new THREE.WebGLRenderer({canvas});  //将Canvas绑定到renderer

            renderer.setSize(width, height); //将渲染的大小设为与Canvas相同

            renderer.setClearColor(0xFFFFFF, 1.0); //设置默认颜色与透明度 16进制

        }

        // 初始化相机
        function initCamera() {
            //简单的正交投影相机，正对着视口的中心，视口大小与Canvas大小相同 left, right, top, bottom, near, far
            camera = new THREE.OrthographicCamera(width / -2, width / 2, height / 2, height / -2, 1, 1000);

            //设置相机的位置
            camera.position.x = 0;
            camera.position.y = 0;
            camera.position.z = 200;
            // 简写
            // camera.position.set(0, 0, 5);

            //设置相机的上方向
            camera.up.x = 0;
            camera.up.y = 1;
            camera.up.z = 0;

            //设置相机聚焦的位置
            camera.lookAt({
                x: 0,
                y: 0,
                z: 0
            });
        }

        // 初始化场景
        function initScene() {
            scene = new THREE.Scene();
        }

        //创建一个边长为100的立方体
        function initObject() {
            var geometry = new THREE.CubeGeometry(100, 100, 100);
            object = new THREE.Mesh(geometry, new THREE.MeshNormalMaterial());
            scene.add(object);
        }

        // 创建一个动画循环
        function render() {
            requestAnimationFrame(render);
            object.rotation.x += 0.05;
            object.rotation.y += 0.05;
            renderer.render(scene, camera);
        }


        function threeStart() {
            initRenderer();
            initCamera();
            initScene();
            initObject();
            render();
        }

        window.onload = threeStart();

    </script>
</body>

</html>